<template>
  <div class="token-manage">
    <div class="top flex-left">
      <!-- <div class="category-select flex-left" v-if="$sotre.state.userInfo.platform_id===1">
        <label>钱包</label>
        <el-select
          v-model="searchForm.type"
          placeholder="请选择"
          size="medium"
          @change="changeCategory"
        >
          <el-option v-for="(item,index) in list" :key="index" :label="item" :value="index+1"></el-option>
        </el-select>
      </div>-->
      <el-button
        type="primary"
        size="medium"
        @click="dialog.show=true;dialog.type=0;dialog.data={}"
      >+ &nbsp;新建交易对</el-button>
    </div>
    <!-- 数据表 -->
    <div class="data-table">
      <el-table
        size="small"
        v-loading="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(211, 215, 212, 0.5)"
        :data="tableData"
        stripe
        header-cell-class-name="headerStyle"
        style="width: 100%"
      >
        <el-table-column align="center" label="交易对">
          <template slot-scope="item">
            <span class="min-amount">{{item.row.to}} / {{item.row.from}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="min_amount" label="最小兑换量">
          <template slot-scope="item">{{item.row.min_amount}} {{item.row.from}}</template>
        </el-table-column>
        <el-table-column align="center" label="闪兑点差(%)">
          <template slot-scope="item">{{item.row.market_price_float*100}}</template>
        </el-table-column>
        <el-table-column align="center" label="闪兑行情类型">
          <template slot-scope="item">{{item.row.manual_price_status==="0"?'自动行情':'固定行情'}}</template>
        </el-table-column>
        <el-table-column align="center" label="闪兑价格" width="300">
          <template slot-scope="item">
            <span>{{`${item.row.price||''} ${item.row.to} ≈ 1 ${item.row.from}`}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手续费类型">
          <template slot-scope="item">{{item.row.fee_percent==='0'?'固定手续费':'浮动手续费'}}</template>
        </el-table-column>
        <el-table-column align="center" label="手续费">
          <template
            slot-scope="item"
          >{{item.row.fee_percent==='0'?item.row.min_fee:`${item.row.fee_percent*100}%`}} {{item.row.from}}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="item">
            <el-button
              type="text"
              @click="show_hide(item,'1')"
              v-if="item.row.status==='2'"
              :loading="onChange===item.$index"
            >显示</el-button>
            <el-button
              type="text"
              @click="show_hide(item,'2')"
              v-if="item.row.status==='1'"
              :loading="onChange===item.$index"
            >隐藏</el-button>
            <el-button type="text" @click="edit(item.row,1)">编辑</el-button>
            <el-button type="text" style="color:red" @click="del(item.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pairs :visible="dialog" :id="platform_id" :coins="coins" :excs="supExc" @success="search()"></pairs>
      <!-- 分页 -->
      <pages :pages="pages" :total="total" @pageChange="pageChange" layout="prev, pager, next"></pages>
    </div>
  </div>
</template>

<script>
import Pages from "@/components/PageBox.vue";
import Pairs from "./TsPairs";
import {
  getTokens,
  delTokenPairs,
  getCoinsPrice,
  supTokens,
  getTradeSup
} from "./FlashChange.service";
export default {
  components: {
    Pages,
    Pairs
  },
  data() {
    return {
      dialog: {
        show: false,
        type: 0, //0-添加,1-编辑,2-查看
        data: {}
      },
      pages: {
        page: 1,
        size: 10
      },
      tableData: [],
      coins: [],
      supExc: [],
      platform_id: this.$store.state.userInfo.platform_id,
      total: 0,
      loading: false,
      onChange: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.search();
      this.getSupTokens();
      this.getSupExc();
    },
    // 获取支持币种
    async getSupTokens() {
      const res = await supTokens();
      this.coins = res.data || [];
    },
    // 获取支持交易所
    async getSupExc() {
      const res = await getTradeSup();
      console.log(res);
      this.supExc = res.data || [];
    },
    async search() {
      this.loading = true;
      const res = await getTokens(this.platform_id);
      this.tableData = res.data || [];
      if (this.tableData.length !== 0) await this.getPrice(res.data);
      // this.total =
      //   Number(res.data.page.pageCount) * Number(res.data.page.pageSize);
      this.loading = false;
    },
    edit(item, type) {
      this.dialog = {
        show: true,
        type: type,
        data: item
      };
    },
    async del(item) {
      this.$confirm(
        `确定删除交易对 <span class="confirm-tip-color">${item.from}/${item.to}</span> ？`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true
        }
      )
        .then(() => {
          delTokenPairs({ platform_id: this.platform_id, id: item.id }).then(
            res => {
              if (res.code === 0) {
                this.$notify.success({
                  title: "提示",
                  message: "删除成功",
                  duration: 1500
                });
                this.search();
              } else {
                this.$notify.error({
                  title: "提示",
                  message: "删除失败，请稍后重试。",
                  duration: 1500
                });
              }
            }
          );
        })
        .catch(() => {
          this.$message.info("已取消删除。");
        });
    },
    async getPrice(list) {
      list.forEach(async (item, index) => {
        if (item.manual_price_status === "1") {
          this.$set(this.tableData, index, {
            ...this.tableData[index],
            ...{ price: item.manual_price }
          });
        } else {
          let param = {
            currency: item.from_show_name,
            base_currency: item.to_show_name,
            exchange:this.tableData[index].market_price_source
          };
          const res = await getCoinsPrice(param);
          this.$set(this.tableData, index, {
            ...this.tableData[index],
            ...{
              price:
                (
                  res.data *
                  (1 - Number(this.tableData[index].market_price_float))
                ).toFixed(this.tableData[index].price_scale) || ""
            }
          });
        }
      });
    },
    pageChange(val) {},
    pageSizeChange(val) {}
  }
};
</script>

<style lang="scss">
.token-manage {
  position: relative;
  min-height: calc(100vh - 100px);
  .top {
    .category-select {
      width: 230px;
      margin-right: 30px;
      color: #606266;
      label {
        width: 60px;
        flex-shrink: 1;
      }
    }
    .input-with-select {
      width: 341px;
      .el-input-group__append {
        background-color: #66b1ff;
        color: #fff;
      }
    }
  }
  .data-table {
    position: relative;
    padding-bottom: 20px;
    background: #fff;
    border-radius: 5px;
    margin-top: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0 0 15px;
    .min-amount {
      text-align: left;
    }
    .link {
      color: #409eff !important;
    }
  }
}
</style>